<template>
	<view>
		<van-search class="search" :value="searchValue" @change="searchInput" @search="onSearch" shape="round"
			placeholder="请输入搜索关键词" />
		<!-- <view class="notice" v-if="!user.mobile && tabactive == 1">
			<view class="notice-flex" @click="navTo('/pages/login/register')">
				<view class="notice-text"> 验证后可查看产品价格</view>
				<van-icon name="arrow" />
			</view>
			<van-icon name="cross" color="#FF6200" />
		</view> -->
		<van-tabs :active="tabactive" @change="ontabChange" color="#359BEF" title-active-color="#359BEF">
			<van-tab v-for="(item, i) in tabList" :title="item.title" :key="i">
				<view class="content">
					<view class="left">
						<van-sidebar custom-class="sidebar" :active-key="jyactiveKey">
							<van-sidebar-item v-for="(item, key) in jysidebarList" :title="item.name"
								@click="jytabClick(item.id, key)" :key="item.id" />
						</van-sidebar>
					</view>
					<view class="right">
						<!-- <image class="topimg" src="https://daiyue.gzzhenyi.net/static/products/topimg.png"
							mode="widthFix"></image> -->
						<image class="topimg" :src="baseUrl + jysidebarList[index].image" mode="widthFix"></image>
						<view class="item" v-for="item in productList" @click="onCilks(item)">
							<view class="img">
								<image :src="baseUrl + item.image" mode="widthFix"></image>
							</view>
							<view class="textbox">
								<view class="title">{{ item.title }}</view>
								<view class="jiage" v-if="item.main_type == 2">
									<text class="vipPrice">验证后查询底价</text>
									<!-- <text class="price" >{{ item.price || 0 }}</text> -->
								</view>
								<view class="jiage" v-else>
									<text class="vipPrice">会员价:{{ item.vip_price || 0 }}</text>
									<text class="price">{{ item.market_price || 0 }}</text>
								</view>
								<view v-if="tabactive == 1" class="yishou">{{ item.description }}</view>
							</view>
						</view>
						<van-empty description="无数据" v-if="productList.length == 0" />
					</view>
				</view>
			</van-tab>
		</van-tabs>
		<van-popup round :show="isModalVisible" @close="onClose">
			<view class="code_center">
				<view class="box">
					<view class="title">验证手机号</view>
					<view class="mobile">{{ hiddenmobile }}</view>
					<view class="code">
						<input class="input-code" v-model="verificationCode" placeholder="请输入验证码" />
						<van-button plain hairline size="small" type="info" @click="send">发送</van-button>
					</view>
					<!-- <van-cell-group>
						<van-field :value="verificationCode" center clearable placeholder="请输入验证码" :border="false"
							use-button-slot>
							<van-button slot="button" size="small" type="primary">
								发送验证码
							</van-button>
						</van-field>
					</van-cell-group> -->
				</view>
				<view class="btn" @click="verification">
					立即验证
				</view>
				<view v-if="errorMessage" class="error">{{ errorMessage }}</view>
			</view>
		</van-popup>
		<!-- <view v-if="isModalVisible" class="modal">
			<view class="modal-content">
				<view class="phone-number">
					<text>手机号: {{ hiddenmobile }}</text>
				</view>
				<button @click="sendVerificationCode" :disabled="isCodeSent">发送验证码</button>
				<input type="number" placeholder="请输入验证码" v-model="verificationCode" />
				<button @click="verifyCode">验证</button>
				<view v-if="errorMessage" class="error">{{ errorMessage }}</view>
			</view>
		</view> -->
		<view class="bottom">
			<button class="custom-button" type="default" plain="true" open-type="contact">
				<image src="/static/index/contact.png" mode="widthFix"></image>
			</button>
		</view>
	</view>
</template>

<script>
	import {
		getCategory,
		getCateGoods,
		sendCode,
		getFloorPrice
	} from '@/api/api.js'
	import baseUrl from '@/api/baseUrl';
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				baseUrl,
				tabactive: 0,
				jyactiveKey: 0,
				yyactiveKey: 0,
				index: 0,
				tabList: [{
						title: '家用医疗产品'
					},
					{
						title: '医用医疗产品'
					}
				],
				jysidebarList: [],
				productList: [],
				goods_id: 0,

				isModalVisible: false,
				verificationCode: '',
				errorMessage: '',
				isCodeSent: false,
				searchValue: '',
			}
		},
		onLoad(options) {
			this.tabtb()
		},
		computed: {
			...mapState(['user']),

			hiddenmobile() {
				return this.user.mobile.slice(0, 3) + '****' + this.user.mobile.slice(7);
			}
		},
		methods: {
			...mapMutations('user', ['changeMobile']),
			searchInput(e) {
				this.searchValue = e.detail;
			},
			// 搜索
			onSearch() {
				if (!this.searchValue) {
					return uni.showToast({
						title: "请输入内容",
						icon: "none"
					})
				} else {
					uni.reLaunch({
						url: `/pages/store/store?searchValue=${this.searchValue}`
					})
				}
			},
			// 链接跳转
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			tabtb() {
				getCategory({
					type: this.tabactive + 1
				}).then(res => {
					console.log(res)
					this.productList = []
					this.jysidebarList = res.data
					if (this.jysidebarList.length > 0) {
						this.jytabClick(res.data[0].id)
					}
				})
			},
			jytabClick(id, index) {
				this.index = index
				getCateGoods({
					id,
					type: this.tabactive + 1
				}).then(res => {
					console.log(res)
					this.productList = res.data.goods.data
				})
			},
			ontabChange(e) {
				this.tabactive = e.detail.index
				this.tabtb()
			},
			onCilks(item) {
				console.log(item)
				this.goods_id = item.id
				if (item.main_type == 2) {
					if (!this.user.mobile) {
						uni.showToast({
							title: '请绑定手机号',
							icon: 'none'
						})
						setTimeout(() => {
							this.navTo(`/pages/setting/mobile`)
						}, 500)
					} else {
						this.showModal()
						/* setTimeout(() => {
							this.navTo('/pages/login/register')
						}, 500) */
						// this.navTo(`/subCure/leaseList/leaseList?id=${item.id}`)
					}
				} else {
					this.navTo(`/long/productDetail/productDetail?id=${item.id}`)
				}
			},
			// 手机号验证框
			showModal() {
				this.isModalVisible = true;
			},
			// 关闭验证框
			onClose() {
				this.isModalVisible = false;
				this.verificationCode = ""
			},
			send() {
				sendCode({
					mobile: this.user.mobile,
					event: "verify"
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '发送成功',
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 验证手机号
			verification() {
				getFloorPrice({
					mobile: this.user.mobile,
					captcha: this.verificationCode,
					goods_id: this.goods_id
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: "验证成功",
							icon: 'none'
						})
						setTimeout(() => {
							this.navTo(
								`/subCure/particulars/particulars?id=${this.goods_id}&lowest_price=${res.data.lowest_price}`)
						}, 500)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			/* async sendVerificationCode() {
				try {
					// 这里调用发送验证码的 API
					console.log('发送验证码:', this.phoneNumber);
					this.isCodeSent = true;
					this.errorMessage = '';
				} catch (error) {
					this.errorMessage = '发送验证码失败，请重试';
				}
			},
			async verifyCode() {
				if (!this.verificationCode) {
					this.errorMessage = '请输入验证码';
					return;
				}
				try {
					// 这里调用验证验证码的 API
					console.log('验证验证码:', this.verificationCode);
					this.errorMessage = '';
					this.isModalVisible = false;
					alert('验证成功');
				} catch (error) {
					this.errorMessage = '验证码错误，请重试';
				}
			} */
		}
	}
</script>

<style lang="scss">
	.search {
		width: 100%;
	}

	.notice {
		padding: 20rpx 40rpx;
		background-color: #FFECE0;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.notice-flex {
			display: flex;
			font-size: 28rpx;
			color: #FF6200;

			.notice-text {
				margin-left: 20rpx;
			}
		}
	}

	.content {
		display: flex;
		border-top: 1px solid #F0F0F0;

		.left {
			background: #F6F6F6;

			.van-sidebar-item--selected {
				border-color: #359BEF;
				padding: 24rpx;
				margin: 20rpx 0;
			}
		}

		.right {
			background: #fff;
			padding: 20rpx;
			flex: 1;

			.topimg {
				width: 100%;
				height: 180rpx;
				border-radius: 10rpx;
			}

			.item {
				display: flex;
				box-sizing: border-box;
				padding: 20rpx 0;
				border-top: 1px solid #F0F0F0;

				.img {
					width: 196.2rpx;
					height: 146.7rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;
					border-radius: 5rpx;
					opacity: 1;
					background: #FFFFFF;
					box-shadow: 0px 0px 8rpx 0px rgba(0, 0, 0, 0.06);
					flex-shrink: 0;

					image {
						width: 50%;
					}
				}

				.textbox {
					padding: 15rpx 20rpx;
					display: flex;
					flex-direction: column;
					row-gap: 16rpx;

					.title {
						font-size: 30rpx;
						color: #333333;
					}

					.jiage {
						display: flex;
						column-gap: 20rpx;

						.vipPrice {
							color: #FF6200;
							font-size: 22rpx;
						}

						.price {
							color: #333333;
							font-size: 22rpx;
						}
					}

					.yishou {
						font-size: 20rpx;
						color: #CCCCCC;
					}
				}
			}
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		right: 2%;

		.custom-button {
			border: none !important;
			padding: 0 !important;
			line-height: normal;

			image {
				width: 117rpx;
				height: 117rpx;
				object-fit: cover;
			}
		}
	}

	.code_center {
		padding: 36rpx 56rpx 36rpx 56rpx;
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.box {
			display: flex;
			flex-direction: column;
			row-gap: 20rpx;
			width: 360rpx;

			.title {
				text-align: center;
				font-size: 40rpx;
				color: #333333;
			}

			.mobile {
				text-align: center;
				font-size: 36rpx;
				font-weight: bold;
			}

			.code {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.input-code {
					flex: 1;
					width: 100%;
					font-size: 36rpx;
				}
			}
		}

		.btn {
			width: 160rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			color: #fff;
			background-color: #FF6200;
			border: 1rpx solid #FF6200;
			border-radius: 12rpx;
			margin-top: 30rpx;
		}
	}
</style>